<template>
  <!-- register -->
  <div class="register">
    <div class="register-center">
      <!-- container头部布局 -->
      <el-container>
        <el-header>
          <!-- image基础用法 -->
          <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
              <!-- ./跳转到首页 -->
              <a href="./">
                <el-image
                  style="width: 157px; height: 76px"
                  :src="url"
                  :fit="fit"
                ></el-image
              ></a>
            </div>
          </div>
        </el-header>
        <!-- 主要区域 -->
        <el-main style="overflow: hidden" class="register-c-body">
          <!-- 标题 -->
          <h2>
            <span>
              欢迎登录YHA
              <font style="vertical-align: super; font-size: 50%">®</font>
              青年旅舍
              <font style="vertical-align: super; font-size: 50%">®</font>
            </span>
          </h2>
          <!-- 密码表单 -->
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm login-form"
            label-position="left"
          >
            <el-form-item prop="loginID" label-width="100">
              <div><i class="el-icon-user"></i></div>
              <el-input
                class="login-form-1"
                v-model.number="ruleForm.loginID"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass" label-width="100">
              <div><i class="el-icon-lock"></i></div>
              <el-input
                class="login-form-2"
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <div class="form-forget">
              <div class="forget-left">
                <el-checkbox v-model="checked" class="checkbox_text"
                  >自动登录</el-checkbox
                >
              </div>

              <div class="forget-right">
                忘记密码 ?
                <a href="/web-index-getpassword1" style="color: #f7941c"
                  >点击重置&gt;&gt;</a
                >
              </div>
            </div>
            <el-form-item label-width="100">
              <el-button
                style="
                  width: 100%;
                  height: 50;
                  border-radius: 25px;
                  color: #fff;
                  background-color: #f7941c;
                  font-size: 20px;
                  text-align: center;
                  cursor: pointer;
                  font-family: '微软雅黑';
                "
                @click="submitForm('ruleForm')"
                class="submitFrom"
                >登录</el-button
              >
            </el-form-item>
          </el-form>

          <p class="no-registration">
            还没有注册？使用第三方帐号登录 或
            <a href="/register" style="color: #f7941c">注册账号&gt;&gt;</a>
          </p>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios.js'
export default {
  data() {
    return {
      checked: false,
      fits: ['cover'],
      url: 'http://www.yhachina.com/images/logo.png',
      ruleForm: {
        pass: '',
        checkPass: '',
        loginID: '',
      },
      rules: {
        pass: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },
        ],
        loginID: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    // 登录
    submitForm(formName) {
      // console.log(this.$refs.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log('登录')
          let url = 'http://127.0.0.1:3000/login'
          // console.log(myaxios);
          myaxios
            .post(url, { user: this.ruleForm.loginID, pwd: this.ruleForm.pass })
            .then((res) => {
              console.log(res)
              console.log(res.data.code) //200
              if (res.data.code == 200) {
                // 存储机制: 临时的一定会存, 永久的就要看用户的选项
                sessionStorage.setItem('user', JSON.stringify(res.data.data))
                // 根据 下次自动登录的值, 来判断要不要存永久
                console.log('登录成功, 即将跳转到首页', res.data.data)
                this.$message({
                  type: 'success',
                  message: '登录成功',
                })
                window.localStorage.setItem('user', res.data.data)

                // 跳转到首页
                this.$router.push('/')
              } else {
                console.log('登录失败，请检查账号和密码')
                return false
              }
            })
        } else {
          console.log('登录失败，请检查账号和密码')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ol,
ul,
li,
form,
label,
table,
tbody,
thead,
tr,
th,
td,
nav {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

.register {
  background: url(../images/login-bg.jpg) no-repeat center;
  background-size: cover;
  color: #333;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: auto;
}
.register-center {
  width: 540px;
  margin: 0 auto;
  padding: 10vh 0 4vh;
  padding-top: 10vh;
  padding-right: 0px;
  padding-bottom: 4vh;
  padding-left: 0px;
}

.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.register-c-body {
  background-color: #f4fbff;
  padding: 30px 40px !important;
  margin-top: 50px;
  -moz-box-shadow: 0 5px 0px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 5px 0px 0 rgb(255 255 255 / 40%);
  border-radius: 5px;
  h2 {
    font-size: 30px;
    border-bottom: 1px solid #dcdcdc;
    height: 58px;
    text-align: center;
    span {
      display: inline-block;
      height: inherit;
      border-bottom: 3px solid #f7941c;
    }
  }
}
.login-form {
  margin-top: 15px;
  position: relative;
  i {
    font-size: 24px;
    z-index: 100000;
    position: absolute;
    top: 12px;
    left: 8px;
  }
  input {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    padding-left: 40px;
  }
}

.form-forget {
  height: 35px;
  line-height: 35px;
  display: flex;
  justify-content: space-between;
}

.forget-left {
  float: left;
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0;
}
.checkbox_text {
  // display: none;
  cursor: default;
  float: left;
  height: 35px;
  line-height: 35px;
  color: #333;
}
.forget-right {
  display: inline;
  float: right;
}
.submitFrom {
  margin-top: 10px;
}
.no-registration {
  margin-top: 30px;
}
</style>
